import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import { Avatar, List } from 'antd'
import $http from '../../Utils/request'
import storage from '../../Utils/storage'

//创建请求头文件
let config = {}
if(storage.get("token") !== null){
  config = {
    headers:
      {'Content-Type': 'application/json',
        'token':storage.get("token").data
      }
  }
}else{
  config = {
    headers:
      {'Content-Type': 'application/json'
      }
  }
}

function Relevant (props) {
  let {id} = useParams();
  const [isTypeInfo,setIsTypeInfo] = useState([]);

  //查询关联
  function getRelevant(){
    $http.get("http://localhost/mall-basic-service/basic/productinfo/queryRelevant/"+id, config)
      .then((response) => {
        setIsTypeInfo(response.data.data)
      })
  }

  useEffect(()=>{
    getRelevant();
  },[])

  return (
    <div className={"relevantDiv"}>
      <List
        size = {"small"}
        header = {"相关商品"}
        itemLayout="horizontal"
        dataSource={isTypeInfo}
        renderItem={(item) => (
          <List.Item>
            <List.Item.Meta
              avatar={<Avatar src={item.href} />}
              title={<a href={`http://localhost:3000/toProductinfo/Details/${item.productId}`}>{item.title}</a>}
              description={item.description}
            />
          </List.Item>
        )}
      />
    </div>
  )
}

export default Relevant